<template>
  <div class="show-right">
    <div class="stick-ul">
      <div class="stick-li" :class="{'stick-scroll':stickIndex<scrollIndex?true:false,'stick-active':stickIndex<(scrollIndex-1)?true:false}" v-for="(stickItem,stickIndex) in scrollGrid" :key="stickIndex" @click="stickTab(stickItem,stickIndex)">{{stickIndex+1}}</div>
    </div>
    <div class="show-right_head">
      <div class="head-title">{{widget[0].title}}</div>
      <div class="head-time">更新：{{widget[0].createTime}}</div>
    </div>
    <div class="show-right_video" v-if="widget[0].vedioUrl">
      <video :src="$ala.urlImage(widget[0].vedioUrl)" id="video" controls autoplay></video>
    </div>
    <div class="show-right_intro" v-if="widget[0].intro">{{widget[0].intro}}</div>
    <div class="show-right_ul" v-if="widget[0].steps.length!=0">
      <div class="ul-head">方法/步骤</div>
      <ul class="steps-ul">
        <li class="steps-li" v-for="(item,index) in widget[0].steps" :key="index">
          <div class="li_l-icon">{{index+1}}</div>
          <div class="steps-li_text">{{item.title}}</div>
          <div class="steps-li_images">
            <div v-for="(iItem,iIndex) in item.images" :key="iIndex">
              <el-image class="li_images-pot" :src="'https://diyapi.5ug.com'+iItem" :preview-src-list="imgPreview(imgList)" :z-index="imgIndex(iItem)"></el-image>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="show-right_ul" v-if="widget[0].notes.length!=0">
      <div class="ul-head">注意事项</div>
      <ul class="steps-p_ul">
        <li class="steps-p_li" v-for="(nItem,nIndex) in widget[0].notes" :key="nIndex">
          <div class="li_icon"></div>
          <div class="li_text">{{nItem}}</div>
        </li>
      </ul>
    </div>
    <div class="show-right_ul" v-if="widget[0].relaitons.length">
      <div class="ul-head course-head">相关教程</div>
      <ul class="course-ul">
        <li class="course-li" v-for="(nItem,nIndex) in widget[0].relaitons" :key="nIndex">{{nItem}}</li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      widget: {}
    },
    data () {
      return {
        imgList: [],
        scrollLsit: [],
        scrollGrid: [],
        scrollIndex: null
      }
    },
    mounted () {
      this.init()
      document.addEventListener('scroll', this.handleScroll, true)
    },
    methods: {
      async init () {
        document.body.scrollTop = 0
        var this_ = this
        this.widget[0].steps.forEach((rImg) => {
          rImg.images.forEach((vli) => {
            // 所需预览的全部图片
            this_.imgList.push(vli)
          })
        })
        setTimeout(() => {
          var doceList = document.getElementsByClassName('steps-li')
          for (var i = 0; i < doceList.length; i++) {
            var gridHeight = 34 * i
            this_.scrollLsit.push(doceList[i].offsetTop - 163 - gridHeight)
            this_.scrollGrid.push(doceList[i].offsetTop - 163 - gridHeight)
          }
          var endScrool = doceList[doceList.length - 1].offsetTop + doceList[doceList.length - 1].offsetHeight - 163 - (34 * (doceList.length - 1))
          this_.scrollLsit.push(endScrool)
        }, 400)
      },
      imgIndex (imgVal) {
        // 预览图片索引
        this.imgList.forEach((res, index) => {
          if (res === imgVal) {
            return index
          }
        })
      },
      imgPreview (val) {
        var arr = []
        val.forEach(element => {
          arr.push('https://diyapi.5ug.com' + element)
        })
        return arr
      },
      handleScroll () {
        var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        for (var i = 0; i < this.scrollLsit.length; i++) {
          if (scroll > this.scrollLsit[i] && scroll < this.scrollLsit[i + 1]) {
            this.scrollIndex = i + 1
          } else if (scroll < this.scrollLsit[0]) {
            this.scrollIndex = null
          }
        }
      },
      stickTab (val, sIndex) {
        document.body.scrollTop = val
        this.scrollIndex = sIndex + 1
      }
    }
  }
</script>
<style lang="scss">
  @import "./widget.scss";
</style>